/**
 * Created by xxx on 2017/7/6.
 */
//用react封装
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//表单的最高高度、当前第几页、总页数、总行数
var otherData = {pageLeft:0,pageRight:0};
//分页
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    },
});
//表单组件
var Table = React.createClass({
    defaultImg(e){
        e.target.src = '../img/image/splitImg.jpg';
    },
    render: function () {
        var startTime = suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(this.props.trData.startTime)),endTime = suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(this.props.trData.endTime));
        var time = startTime +'-'+endTime;
        if((startTime == '' || startTime == null)||(endTime == '' || endTime == null)){
            time = '永久';
        }
        return (
            <tr>
                <td style={{width: '5%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '10%'}}><img src={this.props.trData.bannerUrl} onError={this.defaultImg.bind(this)} /></td>
                <td style={{width: '30%'}}>{this.props.trData.title}</td>
                <td style={{width: '10%'}}>
                    <div className={this.props.trData.isShow=="1"?"widget switch checked":"widget switch"} >
                        <div className="wrapper"></div>
                        <div className="circle" onClick={this.props.onClickTableSwitch}></div>
                    </div>
                </td>
                <td style={{width: '10%'}}>{this.props.trData.index}</td>
                <td style={{width: '20%'}}>{time}</td>
                <td style={{width: '15%'}}>
                    <div className='trButton trLeft clickDliver' onClick={this.props.onClickEdit}>编辑</div>
                    <div className="trButton trLeft table-delete" onClick={this.props.onClickDelete}>删除</div>
                </td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData:this.props.otherData,
            tableData:[],
            bannerMenu:1,
            bannerType: suixun.urlpara('type')==''?1:suixun.urlpara('type')
        }
    },
    componentDidMount: function () {
        suixun.hideLoding();//显示加载中
        this.getTableDate(1,this.state.bannerType,1);
    },
    /**
     * 获取列表数据
     * @param index bannerMenu
     * @param bannerType bannerType
     * @param pageNumber 第几页
     */
    getTableDate: function(index,bannerType,pageNumber){
        var svar = this;
        var param="param={";
        param = getJsonDataNotEmpty(param,"pagenumber",""+pageNumber+"");
        param = getJsonDataNotEmpty(param,"index",'"'+index+'"');
        param = getJsonDataNotEmpty(param,"bannerRange",'"'+bannerType+'"');
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/banner/getBannerPage.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult){
                    var getPageInfoTwo = suixun.getPageInfoTwo(pageNumber,data.info.totlepage);
                    otherData.pageLeft = getPageInfoTwo.pageLeft;
                    otherData.pageRight = getPageInfoTwo.pageRight;
                    currentpage = pageNumber;totlepage = getPageInfoTwo.totlepage;
                    svar.setState({tableData:data.info.queryresult,otherData:otherData});
                    new Viewer(document.querySelector('.head-body'));//调用图片
                }else{
                    suixun.alert('没有数据！',function (data) {
                        if(data){
                            otherData.pageLeft = 0;
                            otherData.pageRight = 0;
                            currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                            svar.setState({tableData:[],otherData:otherData});
                        }
                    });
                }
            }else{
                suixun.alert(data.msg,function (data) {
                    if(data){
                        currentpage = 1;
                        otherData.pageLeft = 0;
                        otherData.pageRight = 0;
                        totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                        svar.setState({tableData:[],otherData:otherData});
                    }
                })
            }
        });
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        suixun.showLoding();//显示加载中
        var onPageLeft = 0,onPageRight = 1,svar = this;
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
        this.getTableDate(this.state.bannerMenu,this.state.bannerType,currentpage);
    },
    /**
     * 删除横幅
     * @returns {XML}
     */
    onClickDelete: function (bannerId) {
        var svar = this;
        suixun.confirm_noTit("是否确定删除？",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                var param="param={";
                param = getJsonDataNotEmpty(param,"bannerIds",""+bannerId+"");
                param += "}";
                suixun.ajax(serverUrl+'/banner/deleteBanner.json',param,"get",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('删除成功!',function (data) {
                            if(data){
                                var tbodyData = $("#tbodyData").children();
                                if(tbodyData.length == 1 && currentpage > 1){
                                    totlepage = totlepage - 1;
                                    svar.onPageClick(currentpage-1);//更新数据
                                }else{
                                    svar.onPageClick(currentpage);//更新数据
                                }
                            }
                        });
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 编辑横幅
     * @returns {XML}
     */
    onClickEdit: function (id) {
        localStorage.bannerId = id;
        window.open('./addBanenr.html?bannerId='+id);
    },

    /**
     * 新增横幅
     * @returns {XML}
     */
    onClickAdd: function () {
        localStorage.removeItem('bannerId');
        window.open('./addBanenr.html');
    },
    /**
     * 点击表单开关
     */
    onClickTableSwitch: function (info,event) {
        var isShow = info[0],svar = this;
        if(isShow == 0){
            isShow = 1;
            $(event.target).parent().removeClass(' checked');
        }else{
            isShow = 0;
            $(event.target).parent().addClass(' checked');
        }
        //去请求修改操作、调用分页函数
        var param="param={";
        param = getJsonDataNotEmpty(param,"bannerId",'"'+info[1]+'"');
        param = getJsonDataNotEmpty(param,"index",'"'+this.state.bannerMenu+'"');
        param = getJsonDataNotEmpty(param,"bannerRange",'"'+this.state.bannerType+'"');
        param = getJsonDataNotEmpty(param,"isShow",'"'+isShow+'"');
        param += "}";
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/banner/updateBanner.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                // suixun.alert('操作成功!');
                svar.onPageClick(currentpage);//更新数据
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 点击菜单
     * @returns {XML}
     */
    onClickMenu: function (number) {
        this.setState({bannerMenu:number});
        this.getTableDate(number,this.state.bannerType,1);
    },
    /**
     * 设置setBannerType
     * @return {XML}
     */
    setBannerType: function (type) {
        this.setState({bannerType:type,bannerMenu:1});
        //初始化
        this.getTableDate(1,type,1);
    },
    render: function () {
        {
            var svar = this;
            var onClickArray = [this.onClickEdit,this.onClickDelete,this.onClickTableSwitch];
            var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    svar.state.bannerMenu==data.index?
                        <Table key={data.bannerId} onClickEdit={onClickArray[0].bind(svar,[data.bannerId])} onClickDelete={onClickArray[1].bind(svar,[data.bannerId])} onClickTableSwitch={onClickArray[2].bind(svar,[data.isShow,data.bannerId])} listNumber={index} trData={data}/>
                        :''
                )
            })
        }
        return (
            <div className="tableManage-body">
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">
                            <span onClick={this.setBannerType.bind(this,1)} className={this.state.bannerType==1?"header-left-button showOrder ":"header-left-button "} style={{width:'175px'}}>家长端资讯banner管理</span>
                            <span onClick={this.setBannerType.bind(this,2)} className={this.state.bannerType==2?"header-left-button menu-width showOrder":"header-left-button menu-width "}>教师端积分主页banner管理</span>
                            <span onClick={this.setBannerType.bind(this,3)} className={this.state.bannerType==3?"header-left-button menu-width showOrder":"header-left-button menu-width "}>家长端积分主页banner管理</span>
                            {/*<a href="../information/information.html" className="header-left-button ">资讯</a>*/}
                        </div>
                        <div className="header-left-annotationsInfo">
                            <img src="../img/icon/annotations.png" />
                            <span className="header-left-annotations-arrowsLeft"/>
                            <div className="header-left-annotations">这里是注释。</div>
                        </div>
                    </div>
                </header>
                <div className="banner-menu">
                    <div className={this.state.bannerMenu=='1'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,1)} ><span>第一张</span></div>
                    <div className={this.state.bannerMenu=='2'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,2)} ><span>第二张</span></div>
                    <div className={this.state.bannerMenu=='3'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,3)} ><span>第三张</span></div>
                    <div className={this.state.bannerMenu=='4'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,4)} ><span>第四张</span></div>
                    <div className={this.state.bannerMenu=='5'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,5)} ><span>第五张</span></div>
                    <div className="add-article" onClick={this.onClickAdd.bind(this)}>
                        <img src="../img/icon/add-white.png" />
                        <span>新增</span>
                    </div>
                </div>
                <div className="tableInfo">
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                <thead>
                                <th style={{width: '5%'}}>序号</th>
                                <th style={{width: '10%'}}>横幅图</th>
                                <th style={{width: '30%'}}>主题摘要</th>
                                <th style={{width: '10%'}}>是否展示</th>
                                <th style={{width: '10%'}}>展示位置</th>
                                <th style={{width: '20%'}}>定时展示</th>
                                <th style={{width: '15%'}}>操作</th>
                                </thead>
                                <tbody>
                                {this.state.tableData==""?'':Tabels}
                                </tbody>
                            </table>
                            {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} />,
    document.getElementById('tableManage')
);